<template>
  <div class="menu-page">
    <header class="header">
      <h1>音乐管理</h1>
    </header>
    
    <div class="menu-container">
      <div class="menu-item" @click="$router.push('/songListFilter')">
        <div class="menu-icon">🎵</div>
        <div class="menu-content">
          <h3>歌单过滤</h3>
          <p>管理您的歌单显示状态</p>
        </div>
        <div class="menu-arrow">›</div>
      </div>
      
      <div class="menu-item" @click="$router.push('/musicTag')">
        <div class="menu-icon">🏷️</div>
        <div class="menu-content">
          <h3>音乐标签</h3>
          <p>编辑音乐标签信息</p>
        </div>
        <div class="menu-arrow">›</div>
      </div>
      
      <div class="menu-item" @click="$router.push('/musicQuery')">
        <div class="menu-icon">🔍</div>
        <div class="menu-content">
          <h3>音乐查询</h3>
          <p>搜索和查询音乐信息</p>
        </div>
        <div class="menu-arrow">›</div>
      </div>
      
      <div class="menu-item" @click="$router.push('/virtualPlay')">
        <div class="menu-icon">🎧</div>
        <div class="menu-content">
          <h3>虚拟歌单</h3>
          <p>创建和管理虚拟歌单规则</p>
        </div>
        <div class="menu-arrow">›</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MusicManagePage'
}
</script>

<style scoped>
.menu-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
  padding-top: 40px;
}

.header h1 {
  color: white;
  font-size: 28px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.menu-icon {
  font-size: 28px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  color: white;
}

.menu-content {
  flex: 1;
}

.menu-content h3 {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.menu-content p {
  color: #666;
  font-size: 14px;
}

.menu-arrow {
  font-size: 24px;
  color: #999;
  font-weight: bold;
}
</style>
